import React from 'react';
import {
  View,
  Text,
  Image,
  ScrollView,
  StyleSheet,
  BackHandler,
  ToastAndroid,
  NativeModules,
  TouchableOpacity,
  KeyboardAvoidingView,
} from 'react-native';
import {
  List,
  Flex,
  Button,
  Drawer,
  InputItem,
  WhiteSpace,
  ActivityIndicator,
} from '@ant-design/react-native';

import DataStore from '../expand/dao/DataStore'

import actions from '../action'
import { connect } from 'react-redux'

import commonStyle from '../common/util/css/commonStyle';
import { NavigationActions } from 'react-navigation';


const Dimensions = require('Dimensions');
const screenWidth = Dimensions.get('window').width;
class LoginScreen extends React.Component {
  static navigationOptions = {
    title: '注册/登录页',
  };
  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      password: '',
      searchData: '',
      animating: false,
    };
    this.dataStore = new DataStore()
  }
  componentDidMount() {
    this.props.navigation.setParams({ openDrawer: this.drawer })
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
  }
  onBackPress = () => {
    const { dispatch, nav } = this.props
    console.log(dispatch)
    if (nav.routes[0].index === 0) {
      return false;
    }
    dispatch(NavigationActions.back());
    return true;
  }
  handerLogin = () => {
    this.setState({ animating: !this.state.animating });
    const url = `https://api.github.com/search/repositories?q=${this.state.phone ? this.state.phone : '123'}`
    this.dataStore.fetchData(url)
      .then(res => {
        console.log(`${new Date(res.timestamp)}`, res)
        this.props.dispatch(actions.onUserChange(this.state.phone))
        this.props.navigation.navigate('Home')
        this.setState({ animating: !this.state.animating });
      }).catch(err => {
        this.setState({ animating: !this.state.animating });
        alert(`请求失败:${err}`)
      })
  }
  render() {
    const { navigation } = this.props;
    const { navigate } = navigation;
    const sidebar = (
      <ScrollView >
        <List>
          <List.Item>
            <Text>aaaaaaaaa</Text>
          </List.Item>
        </List>
      </ScrollView>
    );
    return (
      <Drawer
        sidebar={sidebar}
        position="left"
        open={false}
        drawerRef={el => (this.drawer = el)}
        onOpenChange={this.onOpenChange}
        drawerBackgroundColor="#ccc"
      >
        <KeyboardAvoidingView style={commonStyle.container}
          behavior="padding">
          <Image
            style={commonStyle.logo}
            source={require('../common/util/img/logo.jpg')}
          >
          </Image>
          <List>
            <InputItem
              clear
              type='phone'
              value={this.state.phone}
              onChange={value => {
                this.setState({
                  phone: value,
                });
              }}
              placeholder="请输入手机号"
            >
              手机号
          </InputItem>
            <InputItem
              clear
              type="password"
              value={this.state.password}
              onChange={value => {
                this.setState({
                  password: value,
                });
              }}
              placeholder="password">
              密码
          </InputItem>
            <List.Item>
              <Button type="primary" onPress={this.handerLogin}>
                登录
          </Button>
            </List.Item>
            <List.Item>
              <Button onPress={() => navigate('Register', { name: 'Jane' })}>
                注册
          </Button>
            </List.Item>
          </List>
          <ActivityIndicator
            animating={this.state.animating}
            toast
            size="large"
            text="Loading..."
          />
        </KeyboardAvoidingView>
      </Drawer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
  },
});

const mapStateToProps = state => ({
  nav: state.nav
})
// const mapDispatchToProps = dispatch => ({
//   onUserChange: user => dispatch(actions.onUserChange(user))
// })

export default connect(mapStateToProps)(LoginScreen)
